<template>
  <view class="body">
    <!-- <uni-nav-bar title="恋爱话术" fixed="true" status-bar="true" background-color="#76A3FD"></uni-nav-bar> -->
    <view class="title">
      <image src="/static/home_banner.png" />
    </view>
    <view class="question">
      <view
        class="box"
        @click="type(item.type)"
        v-for="(item, index) in data"
        :key="index"
      >
        <image :src="item.src" />
        {{ item.title }}
      </view>
    </view>
  </view>
</template>

<script>
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
export default {
  onReady() {
    const first = uni.getStorageSync("first");
    if (first.length <= 0) {
      uni.redirectTo({
        url: "../first/index",
      });
    }
  },
  components: {
    uniNavBar,
  },
  data() {
    return {
      data: [
        {
          title: "简单难度",
          type: "简单难度",
          src: "/static/img01.png",
        },
        {
          title: "高频问题",
          type: "高频",
          src: "/static/img02.png",
        },
        {
          title: "地狱难度",
          type: "地狱难度",
          src: "/static/img03.png",
        },
        {
          title: "送命题",
          type: "送命题",
          src: "/static/img04.png",
        },
      ],
    };
  },
  methods: {
    type(type) {
      uni.navigateTo({
        url: `../question/index?type=${type}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
}
.title {
  width: 100%;
  height: 300upx;
  image {
    width: 100%;
    height: 300upx;
  }
}
.question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  .box {
    width: 40%;
    height: 200rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2rpx solid #ccc;
    border-radius: 20upx;
    box-shadow: 4upx 5upx 5upx 5upx rgba(0, 0, 0, 0.2);
    margin: 20upx;
    image {
      width: 100upx;
      height: 100upx;
    }
  }
}
</style>
